<template>
    <div>
        <!-- 导航栏 -->
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <router-link to="/">首页</router-link> &gt;
                <router-link to="/site/goodslist">购物商城</router-link>&gt;
                <a>商品详情</a>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="section" v-if="goodsData.goodsinfo">
            <div class="wrapper clearfix">
                <div class="wrap-box">
                    <!--页面左边-->
                    <div class="left-925">
                        <div class="goods-box clearfix">
                            <!--商品图片-->
                            <div class="pic-box">
                            </div>
                            <!--/商品图片-->

                            <!--商品信息-->
                            <div class="goods-spec">
                                <h1>{{goodsData.goodsinfo.title}}</h1>
                                <p class="subtitle">{{goodsData.goodsinfo.sub_title}}</p>
                                <div class="spec-box">
                                    <dl>
                                        <dt>货号</dt>
                                        <dd id="commodityGoodsNo">{{goodsData.goodsinfo.goods_no}}</dd>
                                    </dl>
                                    <dl>
                                        <dt>市场价</dt>
                                        <dd>
                                            <s id="commodityMarketPrice">¥{{goodsData.goodsinfo.market_price}}</s>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>销售价</dt>
                                        <dd>
                                            <em class="price" id="commoditySellPrice">¥{{goodsData.goodsinfo.sell_price}}</em>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="spec-box">
                                    <dl>
                                        <dt>购买数量</dt>
                                        <dd>
                                            <div class="stock-box">
                                                <el-input-number v-model="count" size="small" :min="1" :max="goodsData.goodsinfo.stock_quantity" label="描述文字"></el-input-number>
                                            </div>
                                            <span class="stock-txt">
                                                库存
                                                <em id="commodityStockNum">{{goodsData.goodsinfo.stock_quantity}}</em>件
                                            </span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dd>
                                            <div class="btn-buy" id="buyButton">
                                                <button class="buy" onclick="cartAdd(this,'/',1,'/shopping.html');">立即购买</button>
                                                <button ref="addShopCartRef" class="add" @click="addToShopCart">加入购物车</button>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                            </div>
                            <!--/商品信息-->
                        </div>


                        <div id="goodsTabs" class="goods-tab bg-wrap">
                            <!--选项卡-->
                            <affix>
                                <div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
                                    <ul>
                                        <li @click="toggleShowContentOrComment(true)">
                                            <a :class="isShowContent?'selected':''" href="javascript:;">商品介绍</a>
                                        </li>
                                        <li @click="toggleShowContentOrComment(false)">
                                            <a :class="!isShowContent?'selected':''" href="javascript:;" class="">商品评论</a>
                                        </li>
                                    </ul>
                                </div>
                            </affix>
                            <!--/选项卡-->

                            <!--选项内容-->
                            <div v-show="isShowContent" class="tab-content entry" style="display:block;">
                                <div v-html="goodsData.goodsinfo.content"></div>
                            </div>

                            <div v-show="!isShowContent" class="tab-content" style="display: block;">
                                <!--网友评论-->
                                <div class="comment-box">
                                    <!--取得评论总数-->
                                    <form id="commentForm" name="commentForm" class="form-box" url="/tools/submit_ajax.ashx?action=comment_add&amp;channel_id=2&amp;article_id=98">
                                        <div class="avatar-box">
                                            <i class="iconfont icon-user-full"></i>
                                        </div>
                                        <div class="conn-box">
                                            <div class="editor">
                                                <textarea id="txtContent" name="txtContent" sucmsg=" " datatype="*10-1000" nullmsg="请填写评论内容！"></textarea>
                                                <span class="Validform_checktip"></span>
                                            </div>
                                            <div class="subcon">
                                                <input id="btnSubmit" name="submit" type="submit" value="提交评论" class="submit">
                                                <span class="Validform_checktip"></span>
                                            </div>
                                        </div>
                                    </form>
                                    <ul id="commentList" class="list-box">
                                        <p style="margin:5px 0 15px 69px;line-height:42px;text-align:center;border:1px solid #f7f7f7;">暂无评论，快来抢沙发吧！</p>
                                        <li>
                                            <div class="avatar-box">
                                                <i class="iconfont icon-user-full"></i>
                                            </div>
                                            <div class="inner-box">
                                                <div class="info">
                                                    <span>匿名用户</span>
                                                    <span>2017/10/23 14:58:59</span>
                                                </div>
                                                <p>testtesttest</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="avatar-box">
                                                <i class="iconfont icon-user-full"></i>
                                            </div>
                                            <div class="inner-box">
                                                <div class="info">
                                                    <span>匿名用户</span>
                                                    <span>2017/10/23 14:59:36</span>
                                                </div>
                                                <p>很清晰调动单很清晰调动单</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <!--放置页码-->
                                    <div class="page-box" style="margin:5px 0 0 62px">
                                        <div id="pagination" class="digg">
                                            <span class="disabled">« 上一页</span>
                                            <span class="current">1</span>
                                            <span class="disabled">下一页 »</span>
                                        </div>
                                    </div>
                                    <!--/放置页码-->
                                </div>

                                <!--/网友评论-->
                            </div>

                        </div>

                    </div>
                    <!--/页面左边-->

                    <!--页面右边-->
                    <div class="left-220">
                        <div class="bg-wrap nobg">
                            <div class="sidebar-box">
                                <h4>推荐商品</h4>
                                <ul class="side-img-list">

                                    <li v-for="item in goodsData.hotgoodslist" :key="item.id">
                                        <div class="img-box">
                                            <router-link v-bind="{to:'/site/goodsinfo/'+item.id}">
                                                <img :src="item.img_url">
                                            </router-link>
                                        </div>
                                        <div class="txt-box">
                                            <router-link v-bind="{to:'/site/goodsinfo/'+item.id}">{{item.title}}</router-link>
                                            <span>{{item.add_time | fmtDate("YYYY-MM-DD")}}</span>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--/页面右边-->
                </div>
            </div>
        </div>

        <!-- 加入购物车的图片 -->
        <transition @before-enter="benter" @enter="enter" @after-enter="aenter">
            <div v-show="isShowImg" class="img" v-if="goodsData.imglist">
                <img ref="imgRef" width="50" height="50" :src="goodsData.imglist[0].thumb_path" alt="">
            </div>
        </transition>
    </div>
</template>

<style>
    @import "../../../static/site/js/jqplugins/picZoom/css/style.css";

    @import "iview/dist/styles/iview.css";

    .img {
        position: absolute;
        width: 50px;
        height: 50px;
        transition: all 0.4s;
    }
</style>

<script>
    import $ from 'jquery'
    import Vue from 'vue'

    // import { bus, GOODSCOUNTCHANGE } from '../../common/commonvue'

    // import { saveGoods } from '../../common/localStorageHelper'
    import { Affix } from 'iview';

    Vue.component('Affix', Affix);

    export default {
        data() {
            return {
                count: 1,//商品数量
                goodsData: {},
                isShowContent: true,//是否显示内容
                isShowImg: false,//是否显示动画图片
                addButtonOffset: {},//加入购物车按钮的left、top值
                cartCountOffset: {}//顶部购物车按钮的left、top值
            }
        },
        created() {
            this.getGoodsData()
        },
        mounted() {
            setTimeout(() => {
                //获取加入购物车按钮的left、top值
                this.addButtonOffset = $(this.$refs.addShopCartRef).offset()

                $(this.$refs.imgRef).css("left", this.addButtonOffset.left).css("top", this.addButtonOffset.top)

                //获取顶部购物车按钮的left、top值
                this.cartCountOffset = $("#shoppingCartCount").offset()
            }, 200);
        },
        methods: {
            //获取商品信息数据
            getGoodsData() {
                const url = `/site/goods/getgoodsinfo/${this.$route.params.goodsId}`

                this.$axios.get(url).then(response => {
                    this.goodsData = response.data.message
                })
            },
            //切换显示和影藏详情内容及评论内容
            toggleShowContentOrComment(isShow) {
                this.isShowContent = isShow
            },
            //加入购物车
            addToShopCart() {
                //1.传递给layout.vue用来更新加入购物车的总数
                //bus.$emit(GOODSCOUNTCHANGE, this.count)

                //2.将添加的商品保存到localStroage中，将来在购物车中使用
                //saveGoods({ goodsId: this.$route.params.goodsId, count: this.count })

                this.$store.commit('addGoods', { goodsId: this.$route.params.goodsId, count: this.count })

                //3.开始动画，加入到顶部购物车按钮中
                this.isShowImg = true
            },
            //动画相关的钩子
            benter(el) {
                //图片的初始位置
                el.style.left = this.addButtonOffset.left + "px"
                el.style.top = this.addButtonOffset.top + "px"
            },
            enter(el, done) {
                //刷新帧，让动画动起来
                el.offsetWidth;

                //图片的结束位置
                el.style.left = this.cartCountOffset.left + "px"
                el.style.top = this.cartCountOffset.top + "px"

                //动画完成了
                done()
            },
            aenter() {
                this.isShowImg = false
            }
        },
        watch: {
            $route: function () {
                this.getGoodsData()
            }
        }
    }
</script>